<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="1050px"
    class="dialog"
    title="会员续费"
  >
    <el-row class="memberRow">
      <el-col :span="1">&nbsp;</el-col>
      <el-col :span="4">会员卡名称</el-col>
      <el-col :span="3">会员卡等级</el-col>
      <el-col :span="3">开卡方式</el-col>
      <el-col :span="5">会员卡号</el-col>
      <el-col :span="4">购买时间</el-col>
      <el-col :span="4">有效期</el-col>
    </el-row>
    <el-row
      v-for="item in memberInfo.memberInnerListVos"
      :key="item.memberNumber"
      class="memberRow"
    >
      <el-col :span="1"
        ><el-radio
          v-model="selectRadio"
          @change="memberChange(item)"
          :label="item.memberNumber"
        ></el-radio
      ></el-col>
      <el-col :span="4">{{ item.title }}</el-col>
      <el-col :span="3">{{ item.rankName }}</el-col>
      <el-col :span="3">{{ radioMap[item.openType] }}</el-col>
      <el-col :span="5">{{ item.memberNumber }}</el-col>
      <el-col :span="4">{{ item.memberRegisterTime }}</el-col>
      <el-col :span="4">{{ item.memberExpireTime }}</el-col>
    </el-row>
    <div class="tInput">
      <span>续费时长&nbsp;</span>
      <el-input-number
        :step="1"
        :min="0"
        step-strictly
        :controls="false"
        v-model="timeLength"
      >
      </el-input-number>天
      <br clear="all" />
    </div>
    <span slot="footer" class="dialog--footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onOk">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { expireTime } from "@/api/customer/member";

@Component
export default class RenewMember extends Vue {
  dialogVisible = false;

  // 会员详情
  memberInfo: any = {};

  // 选中的会员卡
  selectMember: any = {};

  selectRadio = "";

  // 续费时间
  timeLength:number = null;

  // 开卡方式MAP
  radioMap = {
    1: "付费购买",
    2: "积分兑换",
    3: "累计消费金额",
    4: "购买指定商品",
  };

  init(memberInfo) {
    this.memberInfo = memberInfo;
    this.selectRadio = "";
    this.selectMember = {};
    this.dialogVisible = true;
  }

  // 选中的会员卡
  memberChange(info) {
    this.selectMember = info;
  }

  // 续费保存
  onOk() {
    if (!this.selectMember.memberNumber) {
      this.$message({
        type: "error",
        message: "请先选择需要续费的会员卡",
      });
      return false;
    }
    if (!this.timeLength) {
      this.$message({
        type: "error",
        message: "请正确填写续费时长",
      });
      return false;
    }
    try {
      expireTime({
        memberNumber: this.selectMember.memberNumber,
        memberExpireTime: this.selectMember.memberExpireTime,
        date: this.timeLength,
      }).then((res) => {
        console.log(res);
        this.$message({
          type: "success",
          message: "续费成功",
        });
        this.dialogVisible = false;
        this.$emit("refreshDataList");
      });
    } catch (err) {
      console.log(err);
    }
  }

  // 续费天数输入校验
  inputChange(value) {
    this.timeLength = value.replace(/[^0-9]/gi, "");
  }
}
</script>

<style scoped lang="scss">
@include b(memberRow) {
  padding: 10px;
  border: 1px solid rgba(128, 128, 128, 0.23);
  &:last-child {
    border-top: none;
  }
  /deep/ .el-radio__label {
    display: none;
  }
}
@include b(tInput) {
  margin-top: 24px;
  > span {
    line-height: 32px;
    float: left;
  }
  /deep/ .el-input-group {
    width: 200px;
    float: left;
  }
}
/deep/ .el-dialog__header {
  border-bottom: 1px solid rgba(128, 128, 128, 0.23);
}
</style>
